Quarto를 이용한 과학기술 교육컨텐츠 개발

1 What is Quarto?

1.1 About Quarto

Official website: https://quarto.org/

Quarto is an open-source scientific and technical publishing system built on Pandoc.

• Publish high-quality articles, reports, presentations, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
• Author with scientific markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.

2 Why should we use quarto?

2.1 Equations

• \(x, y, z\)
• \(x_1,x_2,x_3\)
• \(x^2, x^3, x^4\)
• \(\alpha, \beta, \gamma, \delta, \epsilon\)
• \(\frac{1}{2}, \frac{1}{3}, \frac{2}{3}, \dots\)
• \(\frac{1}{\sqrt{2\pi}} e^{-\frac{1}{2}x^2}\)
• \(X_1, X_2, \dots, X_n \overset{i.i.d.}{\sim} N(0,1)\)
• \(\frac{X_1+\dots+X_n}{n} \overset{p}{\to} \mu\)

2.2 Equations (2)

• \({\boldsymbol a}, {\bf a}, {\boldsymbol B}, {\bf B}, {\boldsymbol \alpha}, {\boldsymbol \Omega}, \dots\)
• \({\cal A}, {\cal B}, {\cal C}, \dots\)
• \(\mathbb{R}, \mathbb{Z}, \mathbb{R}^2, \dots\)
• \({\bf A}^{-1}, {\bf A}^{\top}, {\bf A}^t, \dots\)
• \({\boldsymbol y} = {\bf X}{\boldsymbol \beta} + {\boldsymbol \epsilon}, \quad {\boldsymbol \epsilon} \sim N({\bf 0}, {\bf I})\)
• \(\underset{x}{\operatorname{min}}f(x)\), \(\underset{x}{\operatorname{argmin}}f(x)\)
• \(\begin{cases} x+y = 1 \\ x-y = 1\end{cases}\)

2.3 Tables (1)

Demonstration of pipe table syntax

Default	Left	Right	Center
12	12	12	12
123	123	123	123
1	1	1	1

2.4 Tables (2)

Table 1: Main Caption

(a) First Table

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

(b) Second Table

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

Main Caption

2.5 Diagrams (1)

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result1]
  C --> E[Result2]

2.6 Diagrams (2)

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

2.7 Diagrams (3)

2.8 Footnotes

Here is an inline note.¹

2.9 Citation

2.9.1 codes in quarto

- Blah Blah [@chandola2009anomaly; @bronstein2017geometric].

- Chandola says blah [-@chandola2009anomaly]

2.9.2 output

• Blah Blah (Chandola, Banerjee, and Kumar 2009; Bronstein et al. 2017).

• Chandola says blah (2009)

2.10 Bibliography Generation

2.10.1 codes in quarto

::: {#refs}
:::

2.10.2 output

Bronstein, Michael M, Joan Bruna, Yann LeCun, Arthur Szlam, and Pierre Vandergheynst. 2017. “Geometric Deep Learning: Going Beyond Euclidean Data.” IEEE Signal Processing Magazine 34 (4): 18–42.

Chandola, Varun, Arindam Banerjee, and Vipin Kumar. 2009. “Anomaly Detection: A Survey.” ACM Computing Surveys (CSUR) 41 (3): 1–58.

2.11 Tabsets

Tab A

Content for Tab A

Tab B

Content for Tab B

2.12 Figures (1)

2.13 Figures (2)

#| layout-ncol: 2
#| fig-cap: 
#|   - "Fig1: Scatter Plot"
#|   - "Fig2: Dot-connected Plot"

import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro'); plt.show()
plt.plot([1,2,4,3],'--ro'); plt.show()

import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro');plt.show()
plt.plot([1,2,4,3],'--ro');plt.show()

Fig1: Scatter Plot

Fig2: Dot-connected Plot

2.14 Layout (1)

2.14.1 List One

• Item A
• Item B
• Item C

2.14.2 List Two

• Item X
• Item Y
• Item Z

2.15 Layout (2)

• Item X
• Item Y
• Item Z

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida eu erat et fring. Morbi congue augue vel eros ullamcorper, eget convallis tortor sagittis.

2.16 Chalkboard

Quarto includes a built-in version of the reveal.js-chalkboard plugin.

2.17 Interactive plots

import plotly.express as px

df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
fig.show()

2.18 Outputs

• Airticles & Reports: html, pdf1, pdf2, msword.

• Presentations: beamer, powerpoint.

• Websites: DV2023, DASH.

• Books: Hands-On Programming with R, Python for Data Analysis, 3E.

Footnotes

1. Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note.